<template>
  <div>
    <el-select
      v-model="value"
      value-key="valueKey"
      placeholder="排序方式"
      :style="{ width: minWidth + 'px' }"
      @change="advancedSelect"
      ref="select_icon"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item"
        @mouseover="setMouseOver(item.describe)"
        @mouseout="setMouseOut()"
      >
        <el-tooltip
          :disabled="visible"
          class="item"
          effect="dark"
          :content="popoverContent"
          placement="top-end"
        >
          <span style="display: inline-block; width: 100%">
            {{ item.label }} <i :class="item.KEY"></i>
          </span>
        </el-tooltip>
      </el-option>
    </el-select>
  </div>
</template>

<script lang="ts">
import { ObjectType } from 'typings/interfaces'
import { defineComponent, ref, onMounted, PropType } from 'vue'
import { forEach } from 'lodash'
export default defineComponent({
  props: {
    ascendingDescending: {
      type: Array as PropType<ObjectType[]>,
      required: true,
    },
  },
  setup(props, { emit }) {
    // const { t } = useI18n()
    const options = ref<ObjectType[]>([])
    const value = ref<ObjectType>()
    const popoverContent = ref('')
    const visible = ref<boolean>(false)
    const advancedSort = ref({})
    const select_icon = ref()
    const minWidth = ref(180)
    forEach(props.ascendingDescending, (d) => {
      if (d.sort) {
        options.value.push({
          ...d,
          valueKey: d.value + 'ASC',
          sortValue: 'ASC',
        })
        options.value.push({
          ...d,
          valueKey: d.value + 'DESC',
          sortValue: 'DESC',
        })
      } else {
        options.value.push({
          ...d,
          valueKey: d.value,
          sortValue: '',
        })
      }
    })
    value.value = options.value[0]

    const setMouseOver = (item) => {
      if (item === undefined || item == '') {
        visible.value = true
      } else {
        visible.value = false
        popoverContent.value = item
      }
    }
    const setMouseOut = () => {
      visible.value = false
    }
    onMounted(() => {
      const dom = select_icon.value.$el
      dom.children[0].children[0].removeChild(dom.children[0].children[0].lastElementChild)
    })
    const advancedSelect = (item) => {
      minWidth.value = Number(item.label.length) * 16 + 50
      const dom = select_icon.value.$el
      const svgDom = document.createElement('span')
      if (dom.children[0].lastElementChild.nodeName == 'SPAN') {
        dom.children[0].removeChild(dom.children[0].lastElementChild)
      }
      svgDom.setAttribute('class', 'el-input__prefix')
      if (item.sortValue == 'ASC') {
        svgDom.innerHTML = `<span class="el-input__prefix-inner"><i style='color:#409EFC' class="el-icon-caret-top"></i></span>`
      } else if (item.sortValue == 'DESC') {
        svgDom.innerHTML = `<span class="el-input__prefix-inner"><i style='color:#409EFC' class="el-icon-caret-bottom"></i></span>`
      } else {
        svgDom.innerHTML = ''
      }
      svgDom.setAttribute(
        'style',
        'position:absolute;right:-' + Number(item.label.length) * 10 + 'px'
      )

      dom.children[0].appendChild(svgDom)

      advancedSort.value = { orderBy: item.value, orderType: item.sortValue }
      emit('advancedChange', advancedSort.value)
    }
    return {
      select_icon,
      options,
      advancedSort,
      minWidth,
      advancedSelect,
      value,
      popoverContent,
      visible,
      setMouseOver,
      setMouseOut,
    }
  },
})
</script>
<style lang="scss" scoped>
::v-deep {
  .el-input__inner {
    border: 0;
    color: #409efc;
    display: inline-block;
  }
}
</style>
